Status Bar Plugin
Description
Control the status bar appearance and behavior.
Discussion
The Status Bar plugin can be used to control the appearance and behavior of the status bar on iOS devices.
See NPM: cordova-plugin-statusbar for full documentation.
Status Bar Plugin - iOS 7 Styling
The Status Bar Plugin default behavior follows the styling recommended by Apple for iOS 7 and greater apps. By default, the iOS status bar is overlaid on top of the WebView. This will requires the addition of a 20px spacer to a Panel header to accommodate the status bar. If you would like to set the behavior to the previous iOS 6 style, which does not overlay the WebView, you must set the properties for the status bar from within the onPhoneGapReady event in the UX Component's Client-side events.
For example:
StatusBar.overlaysWebView(false); StatusBar.styleDefault();
The Cordova StatusBar plugin resizes the size of the WebView control asynchronously. That means that if your UX component uses Panels (which is very likely) the Panels will have been laid out using the original size of the WebView control. This will cause layout errors - most likely manifested as Panel Footers being incorrectly sized. Therefore, it is very important that you add this code to the onPhoneGapReady event to resize the Panels in your component. This code must be wrapped in a setTimeout() so that it runs after the Statusbar plugin has completed.
For example:
StatusBar.overlaysWebView(false);
StatusBar.styleDefault();
setTimeout(function() {
var obj = {dialog.object}.getPanelObject();
obj.resize();
},100);Limitations
Android, iOS